<template>
	<view class="commentList">
		<image :src="item.headerImage"></image>
		<view class="contentList">
			<view class="nickName">{{item.nickName}}</view>
			<view class="content">{{item.content}}</view>
			<view class="dateReplay">
				<text>{{item.date | formTime}}</text>
				<text>{{item.replay}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import time from "@/common/time.js";
	export default {
		props: {
			item: {
				type: Object,
				default: null
			},
			index: {
				type: Number,
				default: 0
			}
		},
		filters: {
			// 格式化日期时间格式
			formTime(value) {
				return new time().formTime(value);
			},
		}
	}
</script>

<style lang="scss">
	.commentList {
		display: flex;
		padding: 20rpx;

		>image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}
	}

	.contentList {
		display: flex;
		flex: 1;
		flex-direction: column;
		padding-top: 20rpx;

		>.nickName {
			color: #659FBE;
			font-size: .98rem;
		}

		>.content {
			margin: 10rpx 0;
		}

		>.dateReplay {
			font-size: .85rem;
			@include flexBetweenCenter;

			>text {
				&:first-of-type {
					color: #E5E5E5;
				}
			}
		}
	}
</style>
